<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加用户</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">

				<form class="layui-form layuimini-form" action="" lay-filter="example">
					<div class="layui-form-item">
						<label class="layui-form-label required">用户名</label>
						<div class="layui-input-block">
							<input type="text" name="username" lay-verify="required" autocomplete="off"
								placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label required">密码</label>
						<div class="layui-input-block">
							<input type="password" name="password" lay-verify="pass" placeholder="请输入密码"
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label required">性别</label>
						<div class="layui-input-block">
							<input type="radio" name="sex" value="男" title="男" checked="">
							<input type="radio" name="sex" value="女" title="女">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">真实姓名</label>
						<div class="layui-input-block">
							<input type="text" name="realname" lay-verify="title" autocomplete="off" placeholder="请输入标题"
								class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">电话</label>
						<div class="layui-input-block">
							<input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入标题"
								class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">开关</label>
						<div class="layui-input-block">
							<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
						</div>
					</div>


					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">备注</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
						</div>
					</div>
				</form>

			</div>
		</div>

		<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			layui.use(['form'], function() {
				var form = layui.form,
					layer = layui.layer;


				//自定义验证规则
				form.verify({
					aaa: function(value) {
						if (value.length < 5) {
							return '标题至少得5个字符啊';
						}
					},
					pass: [
						/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
					],
					content: function(value) {
						layedit.sync(editIndex);
					}
				});

				//监听指定开关
				// form.on('switch(switchTest)', function(data) {
				// 	layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
				// 		offset: '6px'
				// 	});
				// 	layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
				// });

				//监听提交
				form.on('submit(demo1)', function(data) {
					layer.alert(JSON.stringify(data.field), {
						title: '最终的提交信息'
					})
					return false;
				});

				//表单初始赋值
				// form.val('example', {
				// 	"username": "贤心" // "name": "value"
				// 		,
				// 	"password": "123456",
				// 	"interest": 1,
				// 	"like[write]": true //复选框选中状态
				// 		,
				// 	"close": true //开关状态
				// 		,
				// 	"sex": "女",
				// 	"desc": "我爱 layui"
				// })


			});
		</script>

	</body>
</html>